<template>
  <div class="app-container">
    <el-card>
      <div>
        <span>生命体征同步频率</span>
        <el-tooltip
          content="支持自定义设置生命体征同步频率"
          placement="right"
        >
          <i class="el-icon-question"/>
        </el-tooltip>
      </div>
      <el-divider></el-divider>
      <el-form label-width="100px">
        <el-form-item
          label="同步频率："
          prop="name"
          style="font-size: 14px; color: #515a6e"
        >
          <el-input
            v-model="syLifeVal"
            placeholder="请输入数字"
            @change="confirmNumber"
            style="width: 150px"
          />
          min/次
          <el-switch
            v-model="synSwitchVal"
            class="switchBtn"
            inactive-text="关闭"
            active-text="启动"
            active-value="0"
            inactive-value="1"
            active-color="#02538C"
            inactive-color="#B9B9B9"
            @change="chageSwith"
            style="margin-left: 20px"
          />
          <el-button type="primary" @click="btn" style="margin-left: 20px"
          >保存
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin-top: 20px">
      <div>
        <span>夜间模式</span>
        <el-tooltip
          content="自动：在18:00-06:00 时间段,自动进入夜间模式; 手动：需手动选择白天夜间模式。"
          placement="right"
        >
          <i class="el-icon-question"/>
        </el-tooltip>
      </div>
      <el-divider></el-divider>
      <el-form label-width="100px">
        <el-form-item
          label="切换方式："
          prop="name"
          style="font-size: 14px; color: #515a6e"
        >
          <el-switch
            v-model="isAuto"
            active-text="自动"
            inactive-text="手动"
            :active-value="true"
            :inactive-value="false"
            active-color="#02538C"
            inactive-color="#B9B9B9"
            style="margin-left: 20px"
          />

          <el-radio-group v-model="darkModeRadio" v-if="!isAuto" style="margin-left: 20px">
            <el-radio label="0">白天模式</el-radio>
            <el-radio label="1">夜班模式</el-radio>
          </el-radio-group>

          <el-button type="primary" @click="darkModeSave" style="margin-left: 20px"
          >保存
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import {
  getCommonSettingByType,
  updateMonitorFrequency,
  updateDefaultPage,
  QueryLifeSwich,
} from "@/api/table";
import {Message} from "element-ui";

export default {
  data() {
    return {
      syLifeVal: "0",
      id: "",
      synSwitchVal: "",
      darkModeRadio: '0',
      isAuto: false
    };
  },
  mounted() {
    this.getCommonSettingByType();

    //白天夜班模式切换初始化
    this.isAuto = this.$store.state.isAuto;
    this.darkModeRadio = this.$store.state.darkThemeColor ? '1' : '0';
  },
  methods: {
    submitForm(formName) {
      updateMonitorFrequency({
        settingContent: this.syLifeVal,
        id: this.id,
      }).then((res) => {
      });
    },
    //回显
    getCommonSettingByType() {
      getCommonSettingByType({settingType: "synLifeType"}).then((res) => {
        if (res.data != null) {
          this.syLifeVal = res.data.settingContent;
          this.id = res.data.id;
          if (res.data.onOff == null || res.data.onOff == "") {
            this.synSwitchVal = "1";
          } else {
            this.synSwitchVal = res.data.onOff;
          }
        }
      });
    },
    //添加和修改
    btn() {
      updateDefaultPage({
        id: this.id,
        settingName: "生命体征同步频率",
        settingType: "synLifeType",
        settingContent: this.syLifeVal
      }).then((res) => {
        if (res.code == 200) {
          Message({message: "保存成功", type: "success"});
          this.getCommonSettingByType();
        } else {
          Message({message: "保存失败", type: "warning"});
        }
      });
    },
    chageSwith(val) {
      this.synSwitchVal = val;
      if (this.syLifeVal == null || this.syLifeVal == "") {
        Message({message: "生命体征同步频率不能为空", type: "warning"});
      } else {
        QueryLifeSwich({
          id: this.id,
          settingContent: this.syLifeVal,
          onOff: this.synSwitchVal
        }).then((res) => {
          if (res.code == 200) {
            Message({message: "保存成功", type: "success"});
            this.getCommonSettingByType();
          } else {
            Message({message: "更新失败，请先保存频率", type: "warning"});
          }
        });
      }
    },
    confirmNumber(val) {
      if (val == null || val == "") {
        Message({message: "生命体征同步频率不能为空", type: "warning"});
      } else {
        if (!/^[1-9]\d*$/.test(val)) {
          this.syLifeVal = '';
        } else {
          this.syLifeVal = val;
        }
      }
    },
    darkModeSave(){
      this.$store.state.isAuto = this.isAuto;
      this.$store.state.darkThemeColor  = this.darkModeRadio == '1' ? true : false;
      location.reload();
    }
  },
};
</script>
